<template>
  <!-- {{ props.graphDataList }} -->

  <div ref="chartContainer"></div>
</template>

<script setup>
import { onMounted, ref, defineExpose } from 'vue'
import Plotly from 'plotly.js-dist'

const chartContainer = ref(null)

const props = defineProps({
  graphDataList: {
    type: Array,
    default: () => [],
  },
})
const colorValues = Array.from({ length: 100 }, (_, i) => i % 8) // 模拟颜色值（包含超出 0-6 的数）
const childMethod = () => {
  var trace = []

  props.graphDataList.forEach((graphData, index) => {
    trace.push({
      x: graphData.x,
      y: graphData.y,
      mode: 'markers',
      hoverinfo: 'none',
      marker: {
        color: graphData.color,
        // color: Array.from({ length: 300 }, () => Math.random() * 6), // 颜色映射值（0-5）
        // colorscale: 'YlOrRd', // 红黄渐变色板
        showscale: index == 0 ? true : false, // 显示颜色刻度
        size: 5, // 点大小
        // colorscale: 'viridis_r', // 使用反向颜色刻度（示例，可根据实际情况选择）
        coloraxis: 'coloraxis1', // 关联到布局中的 coloraxis
        colorbar: {
          title: '数值映射', // 颜色条标题
          titleside: 'top', // 标题位置
          tickmode: 'array', // 自定义刻度
          // tickvals: [0, 0.5, 1], // 刻度值
          // ticktext: ['0', '0.5', '1'], // 刻度文本
          len: 0.6, // 颜色条长度，范围 0 - 1，这里表示占图表高度的 80%
          thickness: 10, // 颜色条宽度，单位为像素
        },
      },

      // name: graphData.sub_list[0],
    })
  })

  const layout = {
    xaxis: {
      showline: true, // 显示轴线条
      linecolor: 'black', // 透明（RGBA 最后一位为透明度 0）
      gridcolor: 'white', // 网格线颜色
      zeroline: true, // 显示 0 坐标线
      zerolinecolor: 'white', // 0 坐标线颜色
      showticklabels: true,
      showtickmarks: true,
      tickmode: 'auto',
      title: 'X轴',
      tickmode: 'array', // 使用自定义刻度
      tickvals: null, // 自定义刻度位置
      showtickmarks: true, // 显示刻度线
      tickwidth: 1, // 刻度线宽度
      tickcolor: '#666', // 刻度线颜色
      ticklen: 5, // 刻度线长度
      title: {
        text: 'UMAP2', // Y轴标题
        font: { size: 12, color: '#333' },
      },
    },
    yaxis: {
      showline: true, // 显示轴线条
      linecolor: 'black', // 透明
      gridcolor: 'white', // 网格线颜色
      zeroline: true, // 显示 0 坐标线
      zerolinecolor: 'white', // 0 坐标线颜色
      showticklabels: true,
      showtickmarks: true,
      tickmode: 'auto',
      tickmode: 'array', // 使用自定义刻度
      tickvals: null, // 自定义刻度位置
      showtickmarks: true, // 显示刻度线
      tickwidth: 1, // 刻度线宽度
      tickcolor: '#666', // 刻度线颜色
      ticklen: 5, // 刻度线长度
      title: {
        text: 'UMAP1', // Y轴标题
        font: { size: 12, color: '#333' },
      },
    },
    title: 'Multi - Data Scatter Plot',

    //showlegend: true
    // xaxis: {
    //   // visible:false,
    //   showgrid:true,
    //   linecolor:'red' ,
    //   linewidth:22,
    //   showticklabels: false, // 隐藏 x 轴刻度标签
    //   showline: false, // 显示 x 轴线条
    //   linecolor: 'red' // 可根据需求调整坐标轴线条颜色
    // },
    // yaxis: {
    //   linewidth:22,
    //   // visible:false,
    //   showgrid:true,
    //   showticklabels: false, // 隐藏 y 轴刻度标签
    //   showline: false, // 显示 y 轴线条
    //   linecolor: 'red' // 可根据需求调整坐标轴线条颜色
    // },
    showlegend: false,
    margin: { bottom: 60 },
    coloraxis: {
      // cmin: 0, // 颜色刻度最小值
      // cmax: 6, // 颜色刻度最大值
    },
    colorscale: [
      [0, 'yellow'], // 起始颜色（对应值 0）
      [0.5, 'white'], // 中间颜色（对应值 0.5）
      [3, 'red'], // 结束颜色（对应值 1）
    ],
    shapes: [
      // 左侧垂直线（固定 x=0）
      // {
      //   type: 'line',
      //   x0: -5,
      //   x1: -5,
      //   y0: -5,
      //   y1: 20, // 根据实际范围调整
      //   line: { color: 'black', width: 2 },
      // },
      // // 下方水平线（固定 y=0）
      // {
      //   type: 'line',
      //   y0: -5,
      //   y1: -5,
      //   x0: -5,
      //   x1: 20, // 根据实际范围调整
      //   line: { color: 'black', width: 2 },
      // },
    ],
  }

  if (chartContainer.value) {
    Plotly.newPlot(chartContainer.value, trace, layout)
  }
}
function changeData(index) {
  var trace = []
  var item = props.graphDataList[index]
  // console.log(item,'item')
  trace.push({
    x: item.x,
    y: item.y,
    mode: 'markers',
    marker: {
      color: item.color,
      // color: Array.from({ length: 300 }, () => Math.random() * 6), // 颜色映射值（0-5）
      colorscale: 'YlOrRd', // 红黄渐变色板
      showscale: true, // 显示颜色刻度
      size: 5, // 点大小
      colorscale: 'viridis_r',
    },

    // name: item.sub_list[0],
  })

  const layout = {
    title: 'Multi - Data Scatter Plot',
    coloraxis: {
      // cmin: 0, // 颜色刻度最小值
      // cmax: 6, // 颜色刻度最大值
    },
    // xaxis: { title: 'Global_UMAP_1', range: [-50, 100] },
    // yaxis: { title: 'Global_UMAP_2' , range: [-50, 100]},
    //showlegend: true
    // margin: {  bottom: 60, },
  }

  if (chartContainer.value) {
    Plotly.newPlot(chartContainer.value, trace, layout)
  }
}
// 向父组件暴露方法
defineExpose({
  childMethod,
  changeData,
})

onMounted(() => {
  childMethod()
})
</script>